﻿<html>
  <head>
    <meta name="source" content="http://www.terrainformatica.com/wiki/doku.php?id=h-smile:built-in-behaviors:edit"/>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>behavior: textarea</h1>
  <p>标准的多行输入文本框行为。该行为可以应用到任何拥有<code>flow:text</code>和<code>white-space:pre</code>模型的元素上。</p>
  <h2>元素</h2>
  <p>默认情况下，应用了该行为的元素有:</p>
  <ul>
    <li><code>&lt;textarea&gt;...&lt;/textarea&gt;</code> - display:inline-block编辑器;</li></ul>
  <h2>示例</h2>
  <div>
  	<textarea novalue="请输入文本"></textarea>
  </div>
  <h2>属性</h2>
  <p>该行为需要知道的属性:</p>
  <ul>
    <li><code>value=&quot;text&quot;</code> - 元素的初始值。</li>
    <li><code>maxlength=integer</code> - 元素可以接受的最大字符数量。</li>
    <li><code>filter=&quot;filter-expr&quot;</code> - 限制元素允许输入的字符集。<code>filter-expr</code>字符串接受单个字符后字符范围。示例: &quot;.@0~9a~zA~Z&quot; - 所有字母、数字、'.'、'@'字符。 如果你只是想排除一些字符，你只需在过滤字符串前天就'^'字符即可。 所以这个<code>filter=&quot;^.,-&quot;</code>过滤器允许输入除'.'、','、'-'以外的字符。</li>
    <li><code>novalue=&quot;text&quot;</code> - 当输入框为空时显示的文本。你可以使用CSS选择器<code>:empty</code>来设置这个状态时的样式。</li>
    <li><code>readonly</code> - 声明该元素是只读的。</li>
    <li><code>spellcheck=&quot;no&quot;</code> - 是否启用拼写检查, 默认情况下拼写检查是启用状态。</li></ul>
  <h2>事件</h2>
  <p>除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:</p>
  <ul>
    <li>EDIT_VALUE_CHANGED 事件 - 当元素的值被用户修改时产生该事件。该事件为异步事件。</li>
    <li>EDIT_VALUE_CHANGING 事件 - 当任何修改该元素的值时发生该事件。通过该事件你可以在字符插入到文本框前过滤一些字符。该事件为同步事件。其中:</li>
    <ul>
      <li>event.reason 为以下值之一: </li></ul>
    <ul>
      <ul>
        <li>const BY_INS_CHAR  = 3; // 因输入单个字符引起的事件。</li>
        <li>const BY_INS_CHARS = 4; // 从剪切板粘贴引起的事件。</li>
        <li>const BY_DEL_CHAR  = 5; // 由DELETE/BACKSPACE按键引起的事件。</li>
        <li>const BY_DEL_CHARS = 6; // 由删除选择内容引起的事件。</li></ul>
      <li>event.data - string, 读/写。 如果reason为BY_INS_***值，则包含插入的字符;</li></ul></ul>
  <h2>value</h2>
  <p>string, 反应内部输入缓冲区的当前状态。</p>
  <h2>特有组合键</h2>
  <ul>
    <li>LEFT, CTRL+LEFT, SHIFT+LEFT, CTRL+SHIFT+LEFT</li>
    <li>RIGHT, CTRL+RIGHT, SHIFT+RIGHT, CTRL+SHIFT+RIGHT</li>
    <li>HOME, SHIFT+HOME</li>
    <li>END, SHIFT+END</li>
    <li>BACKSPACE, ALT+BACKSPACE, CTRL+BACKSPACE</li>
    <li>CTRL+A</li>
    <li>DELETE, SHIFT+DELETE, CTRL+DELETE</li>
    <li>INSERT, SHIFT+INSERT, CTRL+INSERT</li>
    <li>CTRL+X</li>
    <li>CTRL+V</li>
    <li>CTRL+Z</li>
    <li>CTRL+(LEFT)SHIFT 和 CTRL+(RIGHT)SHIFT - 如果form表单上有<code>dir</code>属性时，这个组合键用来在<code>dir=&quot;ltr&quot;</code>和切换<code>dir=&quot;rtl&quot;</code>间切换。</li></ul>
  <h2>方法</h2>
  <dl>
    <dt><code>canUndo</code></dt>
    <dd><code>(): true|false</code> - 如果撤消缓冲区不为空则返回true。</dd>
    <dt><code>doUndo</code></dt>
    <dd><code>(): true|false</code> - 丢弃编辑框中的最后一次修改，如果有修改则返回true。</dd>
    <dt><code>canRedo</code></dt>
    <dd><code>(): true|false</code> - 如果重做缓冲区不为空则返回true。</dd>
    <dt><code>doRedo</code></dt>
    <dd><code>(): true|false</code> - 应用最后一次修改，如果有修改则返回true。</dd>
    <dt><code>canCut</code></dt>
    <dd><code>(): true|false</code> - 如果有选择内容且该元素不为只读则返回true。</dd>
    <dt><code>doCut</code></dt>
    <dd><code>(): true|false</code> - 移除选择内容，并将它添加到剪切板中。如果有修改则返回true。</dd>
    <dt><code>canCopy</code></dt>
    <dd><code>(): true|false</code> - 如果存在选择内容则返回true。</dd>
    <dt><code>doCopy</code></dt>
    <dd><code>(): true|false</code> - 复制选择的内容到剪切板，如果有修改则返回true。</dd>
    <dt><code>canPaste</code></dt>
    <dd><code>(): true|false</code> - 如果剪切板包含文本则返回true。</dd>
    <dt><code>doPaste</code></dt>
    <dd><code>(): true|false</code> - 将剪切板中的字符插入到当前光标位置处。如果有修改则返回true。</dd>
    <dt><code>canSelectAll</code></dt>
    <dd><code>(): true|false</code> - 如果元素不为空则返回true。</dd>
    <dt><code>doSelectAll</code></dt>
    <dd><code>(): true|false</code> - 选择编辑框中的所有字符，如果有修改则返回true。</dd>
    <dt><code>selectionStart</code></dt>
    <dd><code>(): integer</code> - 返回选择内容的起始位置，如果没有选择内容则返回光标位置。</dd>
    <dt><code>selectionEnd</code></dt>
    <dd><code>(): integer</code> - 返回选择内容的结束位置，如果没有选择内容则返回光标位置。</dd>
    <dt><code>selectionText</code></dt>
    <dd><code>(): string</code> - 返回选择文本，如果没有选择内容则返回空字符串。</dd>
    <dt><code>setSelection</code></dt>
    <dd><code>(anchorPos: integer, caretPos: integer)</code> - 选择编辑框中的文本。如果<code>anchorPos == caretPos</code>，则编辑框不会包含任何选择内容，并且光标会设置在该位置。</dd>
    <dt><code>clearSelection</code></dt>
    <dd><code>()</code> - 清除选择内容(如果存在的话)。</dd>
    <dt><code>insertText</code></dt>
    <dd><code>(text:string)</code> - 在当前光标位置处插入text文本，移动光标到text的结尾处。</dd>
    <dt><code>appendText</code></dt>
    <dd><code>(text:string)</code> - 在编辑框中的当前文本后面添加text文本，移动光标到末尾处。</dd></dl>
</body>
</html>